<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.js"></script>
    <link href="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css" rel="stylesheet" />
    <script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-language/v1.0.0/mapbox-gl-language.js'></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

    <!-- <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script> -->
    <script src='https://unpkg.com/@antv/l7'></script>
    <script src='https://unpkg.com/@antv/g2'></script>

</head>

<body>
    <div id="map" style="height: 600px;"></div>
    <script>
        // import { Scene, Marker } from '@antv/l7';
        // import { GaodeMap } from '@antv/l7-maps';
        // import * as G2 from '@antv/g2';

        /** 数据初始化 */
        let ip1 = '6ql20nip.ipyingshe.net';
        // let ip1 = '192.168.0.53:8080';
        let tileurl = `http://${ip1}/geoserver/gwc/service/tms/1.0.0/rp7%3Agv_cun_pt@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf`;
        //查询点图层数据
        let level = 'shi'
        let fields = 'f270,f275,f280'
        let url2 = `http://${ip1}/geoserver/rp7/ows?service=WFS&version=1.0.0&request=GetFeature&outputFormat=application/json&typeName=rp7:gv_${level}_pt&propertyName=geom,${fields}&format_options=id_policy:reference_no=false`


        /** 地图初始化 */
        mapboxgl.accessToken =
            "pk.eyJ1IjoiaG91eGlleXUiLCJhIjoiY2pldjE5amU3NndzeDM5bzd5bm9ncDgycyJ9.j1F-Lgid3L5k2Abm8_xTeQ";
        const map = new mapboxgl.Map({
            container: "map", // container ID
            style: "mapbox://styles/mapbox/streets-v11", // style URL
            center: [117.125829, 36.656704], // starting position [lng, lat]
            zoom: 7, // starting zoom
        });

        map.addControl(
            new MapboxLanguage({
                defaultLanguage: "zh-Hans",
            })
        );

        const scene = new L7.Scene({
            id: 'map',
            map: new L7.Mapbox({
                mapInstance: map
            })
        });
        scene.on('loaded',async () => {
            let geores = await $.getJSON(url2);
            console.log(geores)
            addChart(geores);
            scene.render();
        });

        function addChart(geores) {
            geores.features.forEach(function (item) {
                const el = document.createElement('div');
                const total =
                    item.properties.f270 + item.properties.f275 + item.properties.f280;

                const size = Math.min(parseInt(total / 30000, 10), 70);
                if (size < 30) {
                    return;
                }
                const itemData = [
                    {
                        item: 'f270',
                        count: item.properties.f270,
                        percent: item.properties.f270 / total
                    },
                    {
                        item: 'f275',
                        count: item.properties.f275,
                        percent: item.properties.f275 / total
                    },
                    {
                        item: 'f280',
                        count: item.properties.f280,
                        percent: item.properties.f280 / total
                    }
                ];

                const chart = new G2.Chart({
                    container: el,
                    width: size,
                    height: size,
                    render: 'svg',
                    padding: 0
                });
                chart.legend(false);
                chart.source(itemData);
                chart.tooltip(false);
                chart.axis('count', {
                    grid: false
                });
                chart
                    .interval()
                    .position('item*count')
                    .color('item', ['#5CCEA1', '#5D7092', '#5B8FF9'])
                // .opacity(1);
                chart.render();
                const marker = new L7.Marker({
                    element: el
                }).setLnglat({
                    lng: item.geometry.coordinates[0],
                    lat: item.geometry.coordinates[1]
                });
                scene.addMarker(marker);
            });
        }
    </script>
</body>

</html>